<template>
  <div id="shouye">
    <div class="bg">  
    </div>
    <div class="content">
        <div class="content_top">
            <h1>F&T的个人博客</h1>
        </div>
        <div class="content_center">
            <p>记录我们的学习&nbsp;&nbsp;·&nbsp;&nbsp;生活的点点滴滴...</p>
        </div>
        <div class="content_bottom">
          <ul>
              <li><a href="/home/blog?msg=hot" ><span class="iconfont icon-homepagenormal"></span></a></li>
              <li><a href="/about"><span class="iconfont icon-guanyuwomen"></span></a></li>
              <li><a href=""><span class="iconfont icon-QQ"></span></a></li>
              <li><a href=""><span class="iconfont icon-weixin"></span></a></li>
              <li><a href="https://leetcode-cn.com/"><span class="iconfont icon-leetcode"></span></a></li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
}
  
</script>

<style scoped>
/* 外部盒子宽高=网页宽高 */
  #shouye{
    width:100%;
    height:100%;
    overflow:hidden;
    text-align:center;
  }
/* 内部盒子高=外部盒子高,内部盒子宽>外部盒子宽   */
  .bg{
    width:120%;
    height:100%;
    background:url('../../assets/img/welcome.jpg');  
    background-size: 100% 100%; /*图片铺满整个内部盒子*/
    background-position: center center; /*图片居中放置*/
    animation: bg 20s infinite linear alternate; /*单次动画20s,无限次,线性播放,左右往返*/
  }
  @keyframes bg {
    from{
        transform:translateX(-10%) /*起始位置*/
    }  
    to{
        transform:translateX(0%) /*结束为止*/
    }
  }
  .content{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:30%;
    display:flex;
    flex-direction: column;
    color:#212121;
  }
  .content_top{
    flex:1;
    font-size:2.5rem;
  }
  .content_center{
    flex:1;
    font-size:1.3rem;

  }
  .content_bottom{
    flex:2;
  }
/* 每个li的宽高设定为固定值 */
  .content_bottom li{
    display:inline-block;
    height:5rem;
    width:5rem;
    margin-right:50px;
    position:relative;
  }
/* a的宽高设定为li宽高的80%,给a标签变大预留空间   */
  .content_bottom li a{
    display:inline-block; 
    height:80%;
    width:80%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid #212121; 
  }
  /* 当鼠标移动到a标签时,a的宽高设为li的宽高 */
  .content_bottom li a:hover{
    background: rgba(255,255,255,0.4);
    height:100%;
    width:100%;
  }
  .content_bottom li a:hover span{
    margin-top:20%;
  }
  .content_bottom li a span{
    display:inline-block;
    color:#212121;
    height:100%;
    width:100%;
    font-size:2.6rem;
    margin-top:15%;
  }
</style>
